<!-- 周期配置主页列表 -->
<!-- cycleConfPage -->
<template>
    <div class="app-container"
         v-loading.fullscreen.lock="allLoading"
         element-loading-text="拼命处理中,请耐心等待"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <SksTableQueryFormEl :showDeleteFilter="false" :mainTable="mainTable" :queryParams="mainTable.queryParams" :showSearch="mainTable.showSearch" :queryParamsColumnList="MULTIPLE_SKS_QUERY_CONFIG" @handleQuery="handleQuery" @resetQuery="resetQuery">
            <template slot="default" slot-scope="{queryParams}">
            </template>
        </SksTableQueryFormEl>
        <SksTable :mainTable="mainTable" @refresh="getMainList">
            <template slot="default">
            </template>
        </SksTable>
    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css';

import {sksPageMixin} from "../../../../lib/sks-page";
import {simulateFilterByQueryParams, sksMockPageMixin} from "../../../../lib/sks-mock";
import {sksParamColumn, sksQueryConfigMapToList} from "../../../../lib/sks-app-utils";
export default {
    name: "Page4030a",
    mixins: [
        sksMockPageMixin,
        sksPageMixin,
    ],
    components: {
    },
    data() {
        return {
            MULTIPLE_SKS_QUERY_CONFIG: sksQueryConfigMapToList({
                descriptionLike: sksParamColumn({
                    htmlType: `input`,
                    //根据map中的key为基准
                    // prop: `nameLike`,
                    label: '姓名模糊查询',
                }),
                // liveTimeInRangeCustomize: autumnParamColumn({
                //     //根据map中的key为基准
                //     // prop: `plannedTimeInRangeCustomize`,
                //     htmlType: `none`,
                //     label: '开播时间',
                // }),
            }),
        };
    },
    methods: {
        initMockParam(){
            return {
                'list|100':[{
                    personId: '@id',
                    description: '@cname',
                    'age|-30-30': 23,
                    'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
                }],
                total: 100,
            }
        },
        initMainTableParam(){
            let tableColumnList = this.sksUtils.newTableColumnList([
                {
                    prop:'personId',
                    label: '人员ID',
                },
                {
                    prop:'description',
                    label: '描述',
                },
                {
                    prop:'age',
                    label: '年龄',
                },


            ]);
            // console.log("initMainTableParam.tableColumnList",tableColumnList)
            return {
                //业务名称,通常用业务表名
                ownerName: `person`,
                uniqueId: 'personId',

                //使用 tableColumnList 渲染
                tableColumnListEnable: true,
                //表列 会根据 sksAppName 自动查询后台配置
                tableColumnList: tableColumnList,

                //使用 queryParamsColumnList 渲染
                queryParamsColumnListEnable: false,
                //搜索字段 会根据 sksAppName 自动查询后台配置
                queryParamsColumnList: [],

            }
        },
        getMainList(){
            let queryParams = this.mainTable.queryParams;

            this.sksUtils.resetSksTableBefore(this.mainTable)


            //模拟数据进行分页展示
            let mockPage = this.mockPagingList(queryParams);
            // console.log("mockPage.queryParams.pageNum pageSize",queryParams.pageNum,queryParams.pageSize)
            // console.log("mockPage",mockPage)
            let saRes={
                data:  mockPage,
            }

            this.sksUtils.setSksTableDataByPage(this.mainTable,saRes.data)

        },
        //列表分页
        mockPagingList(queryParams={}){
            let list=this.mockPage.list
            return this.sksUtils.simulateFilterByQueryParams({
                list: list,
                queryParams: queryParams,
                // filterFun: ({row,queryParams})=>{
                //     if(this.sksUtils.strIsEmpty(queryParams.sksParams.descriptionLike)){
                //         return true;
                //     }
                //     return row.description.includes(queryParams.sksParams.descriptionLike)
                // },
            })
        },
        rowClickMainTable(row){
            this.mainTable.currentRow=row
            this.$emit('rowClickAfter',row)
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.mainTable.selection=selection
            this.mainTable.ids = selection.map(item => item[this.mainTable.uniqueId]);
            this.mainTable.single = selection.length != 1;
            this.mainTable.multiple = !selection.length;
            this.$emit('selectionChangeAfter',selection)
        },
    },
};
</script>

<style>
/*//高亮点击的行*/
.el-table__body tr.current-row>td {
//background: rgb(77, 195, 255, 0.5) !important;
    background-color: #DCDCDC !important;
    color: #000000;
}
/*//鼠标滑过时高亮行*/
.el-table__body tr:hover>td{
//background: rgb(77, 195, 255, 0.2);
    background-color: #d7dcdc !important;
//background: none;
}

.el-table__header-wrapper>table {
    border-collapse: collapse;
    /* margin: 1rem 0; */
    margin: 0px;
    display: block;
    overflow-x: auto;
}

.el-table__body-wrapper>table {
    border-collapse: collapse;
    /* margin: 1rem 0; */
    margin: 0px;
    display: block;
    overflow-x: auto;
}
</style>
